<template>
  <div class="hello">
    <h1>{{title}}</h1>
    <video-player
      class="video-player-box"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
      customEventName="customstatechangedeventname"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @statechanged="playerStateChanged($event)"
      @ready="playerReadied">
    </video-player>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-videojs-player-v7'
import '@thecotne/videojs-vast-vpaid/dist/videojs_5.vast.vpaid.min.js'
import 'videojs-watermark/dist/videojs-watermark.css'
import 'videojs-watermark/dist/videojs-watermark.js'
export default {
  name: 'hello',
  components: {
    videoPlayer
  },
  data () {
    return {
      title: 'Videojs 播放器',
      playerOptions: {
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: 'http://vjs.zencdn.net/v/oceans.mp4'
        }],
        poster: 'http://vjs.zencdn.net/v/oceans.png'
      },
      adsEnabled: true
    }
  },
  mounted () {
    this.$nextTick(_ => {
      // srt
      // console.log(videojs)
      // videojs.registerPlugin('examplePlugin', ExamplePlugin)
      // videojs.addLanguage('es', {
      //   Pause: 'Pausa'
      // })
      this.player.vastClient({
        // Media tag URL
        adTag: 'http://pubads.g.doubleclick.net/gampad/ads?env',
        playAdAlways: true,
        // Note: As requested we set the preroll timeout at the same place than the adsCancelTimeout
        adCancelTimeout: 3000,
        adsEnabled: !!this.adsEnabled
      })
      console.log('player init', this.player)
    })
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    onPlayerPlay (player) {
      console.log('player play!', player)
    },
    onPlayerPause (player) {
      console.log('player pause!', player)
    },
    onPlayerEnded (player) {
      console.log('player ended!', player)
    },
    onPlayerWaiting (player) {
      console.log('player waiting!', player)
    },
    onPlayerPlaying (player) {
      console.log('player playing!', player)
    },
    onPlayerLoadeddata (player) {
      console.log('player loadeddata!', player)
    },
    onPlayerTimeupdate (player) {
      console.log('player timeupdate!', player)
    },
    onPlayerCanplay (player) {
      console.log('player canplay!', player)
    },
    onPlayerCanplaythrough (player) {
      console.log('player canplaythrough!', player)
    },
    // ...player event or listen state event
    playerStateChanged (playerCurrentState) {
      console.log('player current update state', playerCurrentState)
    },
    // player is ready
    playerReadied (player) {
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  h1, h2 {
    font-weight: normal;
  }
  .video-js {
    position: relative;
    .vjs-big-play-button {
      position: absolute;
      top: 40%;
      left: 45%;
    }
  }
</style>
